/**
 * User: Paulo Fournier
 * Date: 19-08-2013
 * Whats Around map/list view
 */

Ext.define('Mobile-app.view.WhatsAround', {
    extend: 'Ext.Panel',
    alias: 'widget.whatsaroundpanel',

    init: function () {
        console.log('init');
    },

    config: {
        modal: true,
        centered: true,
        hideOnMaskTap: true,
        hidden: true,
        width: '80%',
        height: '90%',
        padding: '0 0 0 0',

        layout: 'vbox',

        items: [

            Ext.create('Ext.Map', {
                mapOptions: {
                    center: new google.maps.LatLng(38.524801, -8.891029),  //nearby Setúbal
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
                height: '40%',
                listeners: {
                    maprender: function (comp, map) {

                        var panel = this.up('whatsaroundpanel');

                        Ext.defer(panel.fireEvent,500,panel,['updateWhatsAroundMarkers']);

                    }
                }
            }),

            {
                itemId: 'dist-list',
                flex: 1,
                xtype: 'list',
                cls: 'panel-letter',
                disableSelection: false,
                disclosure: true,
                onItemDisclosure: true,

                itemTpl: new Ext.XTemplate(
                    '<b>', $.t('main.alias'), ':</b> {reference}<br>',
                    '<b>', $.t('main.distance'), ':</b> {distance:this.formatDistance}km<br>',
                    '<b>', $.t('main.duration'), ':</b> {duration:this.formatDuration}',
                    {
                        formatDistance: function (distance) {
                            return Math.round(distance / 1000, 2);
                        },

                        formatDuration: function(diff){
                            //add some local vars
                            var inDays = true, hideSeconds = true, days = 0, hours = 0, minutes = 0, seconds = 0, rest = 0, rest1 = 0, rest2 = 0;
                            //calculate the number of days
                            if(diff % 86400 <= 0) { days = diff / 86400; }
                            //calculate hours, minutes and seconds
                            if(diff % 86400 > 0) {
                                rest = (diff % 86400);
                                days = (diff - rest) / 86400;
                                if( rest % 3600 > 0 ) {
                                    rest1 = (rest % 3600);
                                    hours = (rest - rest1) / 3600;
                                    if( rest1 % 60 > 0 ) {
                                        rest2 = (rest1 % 60);
                                        minutes = (rest1 - rest2) / 60;
                                        seconds = rest2;
                                    } else {
                                        minutes = rest1 / 60;
                                    }
                                } else {
                                    hours = rest / 3600;
                                }
                            }
                            //add days as hours (if flag is active)
                            if(days>0 && !inDays) hours += days*24;
                            //force to chars in minutes and seconds
                            if(minutes < 10){ minutes = "0"+minutes; }
                            if(seconds < 10){ seconds = "0"+seconds; }
                            //return formatted time
                            if(!hideSeconds) return hours+":"+minutes+":"+seconds;
                            else return hours+":"+minutes;
                        }
                    }
                ),

                store: Ext.create('Ext.data.Store', {
                    model: 'Mobile-app.model.WhatsAround',
                    sorters: [
                        {
                            property: "distance",
                            direction: "ASC"
                        },
                        {
                            property: "reference",
                            direction: "ASC"
                        }
                    ]
                })

            }
        ],
        listeners: [
            {
                delegate: '#dist-list',
                event: 'itemtap',
                fn: 'centerWhatsAroundMobile'
            },
            {
                delegate: '#dist-list',
                event: 'disclose',
                fn: 'showWhatsAroundDetails'
            }
        ]
    },

    /***
     * Hide panel with animation
     * @param animation
     */
    hide: function (animation) {

        var me = this;

        //we fire this event so the controller can deselect all items immediately.
        me.fireEvent('hideanimationstart', me);

        //show the mask again
        me.callParent();
    },

    /***
     * Called whenever an item of this list is tapped
     * @param list Ext.DataView.List
     * @param index The index of the item tapped
     * @param target The element or DataItem tapped
     * @param record The record associated to the item
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    centerWhatsAroundMobile: function (list, index, target, record, e, eOpts) {
        this.fireEvent('centerWhatsAroundMobile', list, record);
    },

    /***
     * Fires whenever a disclosure is handled
     * @param list Ext.DataView.List
     * @param record The record associated to the item
     * @param target The element or DataItem tapped
     * @param index The index of the item tappe
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    showWhatsAroundDetails: function (list, record, target, index, e, eOpts) {
        this.fireEvent('showWhatsAroundDetails', list, record, index);
    }
});
